<template>
  <div>
    <NavHead>
      <template v-slot:iconfont-left>
        <i class="iconfont icon-arrowLeft arrow" @click="$router.back()"></i>
      </template>
      <template v-slot:title
        ><span class="title"> {{ title }}</span></template
      >
    </NavHead>
    <van-form validate-first class="form-box">
      <!-- 通过 pattern 进行正则校验 -->
      <van-field
        v-model="phone"
        name="validator"
        placeholder="请输入11位手机号"
        :rules="[{ validator, message: '手机号格式不正确' }]"
      />
      <van-field
        v-model="verifyCode"
        name="pattern"
        placeholder="请输入6位验证码"
        :rules="[{ pattern, message: '验证码为6位数字' }]"
      />

      <van-field
        type="password"
        ref="passRef"
        v-model="password"
        placeholder="请输入6-8位密码"
      />
      <p class="">点击注册代表您已阅读并同意使用协议</p>
      <div style="margin: 16px">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          class="submit-btn"
          @click="submitHandle"
        >
          注册
        </van-button>
      </div>
      <div v-if="flag" class="code" @click="getCodeHandle">获取验证码</div>
      <div v-else class="code">{{ count }}s</div>
    </van-form>
  </div>
</template>

<script>
import api from "../../api";
import NavHead from "../../components/NavHead";
export default {
  name: "Register",
  components: {
    NavHead,
  },
  data() {
    return {
      title: "注册",
      phone: "",
      password: "",
      verifyCode: "",
      count: 60,
      flag: true,
      pattern: /\d{6}/,
    };
  },
  methods: {
    //获取验证码
    getCodeHandle() {
      api.getVerifyCode().then((res) => {
        var timer = setInterval(() => {
          this.flag = false;
          this.count--;
          if (this.count <= 53) {
            clearInterval(timer);
            this.verifyCode = res.data.num;
            this.flag = true;
          }
        }, 1000);
      });
    },
    //校验手机号
    validator(val) {
      return /1\d{10}/.test(val);
    },
    //初始化输入框
    initInput() {
      (this.phone = ""), (this.password = ""), (this.verifyCode = "");
    },
    onSubmit(values) {
      // console.log("submit", values);
    },
    //请求注册接口
    submitHandle() {
      api
        .getRegister({
          username: this.phone,
          password: this.password,
        })
        .then((res) => {
          if (res.data) {
            this.$toast.success(res.data.msg);
            this.initInput();
          }
        })
        .catch((err) => {
          console.log(err);
          this.$toast.fail("注册失败");
        });
    },
  },
};
</script>

<style scoped lang='less'>
.title {
  color: #fff;
  letter-spacing: 1px;
}
.arrow {
  color: #fff;
  font-size: 23px;
  position: absolute;
  left: 0.3rem;
  top: 0.3rem;
}
.form-box {
  font-size: 0.28rem;
  margin-top: 1.2rem;
  padding: 0.2rem;
  position: relative;
  box-shadow: 1px 2px 3px #ccc;
  .code {
    height: 0.6rem;
    width: 1.6rem;
    line-height: 0.6rem;
    background-color: #ff5654;
    border-radius: 0.08rem;
    position: absolute;
    top: 0.25rem;
    right: 0.6rem;
    color: #fff;
  }
  p {
    text-align: left;
    color: #696969;
    margin-top: 0.15rem;
    margin-left: 0.2rem;
  }
}
.submit-btn {
  border-radius: 5px;
  background-color: #ff5654;
  border: none;
}
</style>